<template>
  <el-card style="max-width: 100%" shadow="hover">
   
      <span>
        <h2 class="card-title">公告审核</h2>
      </span>
   
    </el-card>
  <!--选择栏部分-->
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <div >
          <el-select style="width: 160px;" v-model="query.notice_type" placeholder="--选择文章类型--" clearable>
            <el-option label="网站公告" value="网站公告" />
            <el-option label="活动公告" value="活动公告" />
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input v-model="query.notice_theme" style="width: 250px" placeholder="输入想查询的文章主题" />&nbsp;&nbsp;&nbsp;
          <el-button  default  type="primary" :icon="Search" @click="onSubmit">查询</el-button>
        </div>
      </div>
    </template>

    <!--内容呈现部分-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="notice_id" label="文章ID" width="100" />
      <el-table-column prop="release_person" label="发布人员" width="150" />
      <el-table-column prop="notice_type" label="文章类型" width="150" />
      <el-table-column prop="notice_theme" label="文章主题" width="250" />
      <el-table-column prop="notice_image" label="文章图片" width="180">
        <template #default="{ row }">
          <img v-if="row.notice_image"
               :src="`http://localhost:8080/image/upload/${row.notice_image}`"
               alt="notice_image"
               style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column prop="check_info" label="备注" width="150" />
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button default type="success" size="small" @click="singleAgree(scope.row.notice_id)">
            通过
          </el-button>
          <el-button default type="danger" size="small" @click="OpenPassDialog(scope.row.notice_id,scope.row.check_info)">拒绝</el-button>
          <el-button default type="primary" size="small" @click="openDialogDetailFormVisible(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--对话框：拒绝-->
  <el-dialog
      v-model="PassDialogVisible"
      title="填写拒绝理由"
      width="600"
      align-center
  >
    <el-form-item label="该公告存在：" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.check_info">
        <el-checkbox value="昵称具有敏感词" name="type">
          文章具有敏感词
        </el-checkbox>
        <el-checkbox value="头像不符合要求" name="type">
          图片不符合要求
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="PassDialogVisible = false">取消</el-button>
        <el-button default type="primary" @click="Reason()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogDetailFormVisible" title="文章信息详情" width="800">
    <el-form :model="formDetail">

      <el-form-item label="发布者：" :label-width="formLabelWidth1">
        {{ formDetail.release_person }}
      </el-form-item>
      <el-form-item label="文章类型:" :label-width="formLabelWidth1">
        {{ formDetail.notice_type }}
      </el-form-item>
      <el-form-item label="文章主题:" :label-width="formLabelWidth1">
        {{formDetail.notice_theme }}
      </el-form-item>
      <el-form-item label="文章内容：" :label-width="formLabelWidth1">
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
          <li v-for="i in count" :key="i" class="infinite-list-item">{{formDetail.notice_content }}</li>
        </ul>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="dialogDetailFormVisible= false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
const count = ref(0)
const load = () => {
  count.value += 2
}
export default{
  computed: {
    Search() {
      return Search
    }
  },
  components:{
    Search
  },
  data(){
    return{
      count: 1,
      formDetail:{},     //文章表格详细对象
      form:{             //拒绝对象
        check_info:[],
        notice_id: null,
      },    //用于存储点击按钮后获取行数据
      formLabelWidth: '100px',  //对话框宽度
      formLabelWidth1:'100px',
      large:true,
      background: true,
      PassDialogVisible:false,     //拒绝对话框默认为关闭
      dialogDetailFormVisible:false,    //文章详细信息对话框

      query:{                 //查询条件
        notice_theme:'',
        notice_type:'',
        notice_id:null,
      },
      tableData:[],     //商品信息数据
      pageData:[],
      NoticeInfoData:[]
    }
  },
  methods:{
    load() {
      // 在这里实现加载更多内容的逻辑，例如请求后端接口获取更多数据
      // 更新count的值，以便在页面上显示更多内容
    },
    openDialogDetailFormVisible(row){
      console.log(row);
      this.formDetail = row;
      this.dialogDetailFormVisible = true;
    },
    //拒绝时填写备注
    OpenPassDialog(notice_id){
      this.PassDialogVisible = true;
      this.form.notice_id = notice_id;
    },
    Reason(){
      this.form.check_info=this.form.check_info.join(',');
      console.log(this.form.check_info);
      console.log(this.form.notice_id);
      this.$http.post("http://localhost:8080/notice/updateCheck_info?check_info="+this.form.check_info+"&notice_id="+this.form.notice_id).then((res)=>{
        if(res.data !==0){
          this.PassDialogVisible = false;
          this.LoadUpdateNoticeData();
          this.form = {};
          ElMessage({
            message:"拒绝发送成功！",
            type:"success",
          })
        }else{
          ElMessage({
            message:"拒绝发送失败！",
            type:"success"
          })
        }
      }).catch(function (err) {
        console.log(err);
      });
    },
    //修改数据的审核状态
    singleAgree(notice_id){
      this.scope = this.tableData.filter(row => row.notice_id === notice_id);
      console.log(notice_id);
      ElMessageBox.confirm(
          '确定通过?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            this.$http.post("http://localhost:8080/notice/updateStatus/" + notice_id).then((res) => {
              if (res.data == 1) {
                ElMessage({
                  message: "审批成功！",
                  type: "success"
                })
                this.LoadUpdateNoticeData();

              } else {
                ElMessage({
                  message: "审批失败！",
                  type: "success"
                })
              }
            }).catch(function (err) {
              console.log(err);
            })
          })
    },
    //查询提交
    onSubmit(){
      console.log(this.query);
      this.LoadUpdateNoticeData();
    },
    //跨域连接查询用户信息修改的数据对接
    LoadUpdateNoticeData(){
      this.$http.get("http://localhost:8080/notice/checknotice",{params:{
          notice_type:this.query.notice_type,
          notice_theme:this.query.notice_theme,
        }}).then((res)=>{
        this.tableData = res.data;
        this.NoticeInfoData = res.data;
        console.log(this.tableData)
        console.log(this.NoticeInfoData)
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  //被挂载,调用自定义函数
  mounted() {
    this.LoadUpdateNoticeData()
  }
}
</script>

<style>
.infinite-list {
  height: 520px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 120px;
}
</style>